<template>
  <div class="container">
   <!--transition name="el-zoom-in-top">
      <div class="select_unfold">
      <el-button
          @click="selectFold"
          size="medium  "
          title="折叠菜单"
          icon="el-icon-s-fold"
          class="fold_btn"
        >
        </el-button>
      
      <span class="iconfont hhtx-menu2 selectTitle"
        >实验选择
      </span>
      <el-tree
        accordion
        title="选择章节"
        :data="data"
        class="experiment"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
      </!--transition>
    <div-- class="select_fold" v-show="isFold">
      </div>
    </transition>
    <div class="select_fold" v-show="isFold">
      <el-button
        @click="selectFold"
        size="medium "
        title="展开菜单"
        icon="el-icon-s-unfold"
        class="unfold_btn"
        >实验选择
      </el-button>
    </div-->
    
    <el-form :inline="true">
    <el-select class="el-select" placeholder="所有实验" filterable v-model="selectedExperiemnt" @change="handleNodeClick">
        <el-option
        v-for="(item,index) in data"
        :key="item.id"
        :label="item.name"
        :value="index"
        >
        </el-option>
      </el-select>
       <!--el-button
          class="history"
          round
          size="small"
          icon="el-icon-view"
          type="primary"
          @click="history"
          >查看历史提交</el-button
        -->
      </el-form> 

    <div class="table">
     <!--div class="head">
        <span class="title" v-if="tableData">{{tableData.name}}</span>
        <span class="title" v-else>实验列表</span>
      </div-->

      <div class="content">
        <el-table
          v-loading="loading"
          size="mini"
          :data="questions"
          border
          fit
          stripe
          highlight-current-row
          width="100%"
          @row-dblclick="rowDblclick"
        >
          <template slot="empty">
            <span>题目列表为空</span>
            <span class="empty" > ~~~请选择实验~~</span>
          </template>
          <el-table-column
            v-for="(item, index) of columnList"
            :key="index"
            :width="item.width"
            align="center"
            :label="item.label"
           v-loading="loading"
          >
            <template v-slot="{ row }">
          
              <span v-if="item.prop == 'list'">
                <!--el-button
                  v-if="row.answer != null && row.answer == false"
                  type="info"
                  round
                  size="small"
                  icon="el-icon-view"
                  >查看</el-button
                -->
                <el-button
                  type="primary"
                  round
                  size="small"
                  icon="el-icon-view"
                  class="btn"
                  @click="list(row)"
                  >查看</el-button
                >
              </span>
              <span v-else-if="item.prop == 'status'">
                <i v-if="row[item.prop] == 'NeverDo'">未测试</i>
                <i v-else-if="row[item.prop] == 'FAIL'" class="l-icon-error">未通过</i>
                <i v-else-if="row[item.prop] == 'PASS'" class=" el-icon-success">通过</i>
                <i v-else >未测试</i>
                
              </span>
              <span
                v-else-if="item.prop == 'name'"
                class="enter"
                @click="enter(row.index)"
              >
                {{ row[item.prop] }}
              </span>
              <span v-else>{{ row[item.prop] }}</span>
            </template>
          </el-table-column>
          <el-table-column width="0" align="center" label="操作">
            <template v-slot="{ row }">
              <span class="enter el-icon-edit-outline " @click="enter(row)"
                >&nbsp;进入</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      :pager-count="8"
      layout="total, sizes, prev, pager, next, jumper"
      :total="1978">
    </el-pagination>
     </!--div-->
  </div>
</template>

<script>
//import {getExperimentBySchool} from "@/api/experiment.js"
//import {getAllExperiment} from "@/api/experiment.js";
import {getExperimentBySchoolId,getExperimentByexperimentIdAndUserId} from "@/api/experiment.js";
import {getExperimentProblemResultByproblem} from "@/api/viewResults.js"

//表格第一行
const columnList = [
  {
    label: "题目id",
    type: "text",
    prop: "id",
    width: 200
  },
  {
    label: "题目名称",
    type: "text",
    prop: "title",
    width: 400
  },
  {
    label: "提交列表",
    type: "text",
    prop: "list",
    width: 200
  },
  {
    label: "作答情况",
    type: "boolean",
    prop: "status",
    width: 180
  }
];

export default {
  name: "experiment",
  data() {
    return {
      loading: false,
      isFold: false, //选择菜单折叠
      isStudent:false,
      columnList, 
      data: [    //实验列表
      ],
      alltableData:null, 
      tableData:null,  //实验列表
      questions:null,  //题目列表
      selectedExperiemnt:null,
      examAndExperimentId:null,  //实验id
      defaultProps: {
        children:'children',
        label: "name"
      },
      obj:{
        schoolId:JSON.parse(localStorage.getItem("user")).schoolId,
        //pageNum:1,
        //pageSize:30,
        //userId:JSON.parse(localStorage.getItem("user")).userId,
        status:null
      },
      listquery: {
        userId: JSON.parse(localStorage.getItem("user")).userId,
        problemId:null,
        testId:null,
        current:1,
        limit:10
      }
    };
  },
  created() {
    //this.getTableDate();
    this.getSchool();
  },
  
  methods: {
    //获取实验列表
    getSchool() {
      //this.obj.schoolId = JSON.parse(localStorage.getItem("user")).schoolId;
      let userRole = JSON.parse(localStorage.getItem("user")).roleName;
      if(userRole == "student") {
        //this.isStudent = true;
        this.obj.status = "ENABLE";
      } else {
        this.obj.status = null;
      } 
      console.log(this.obj);
      getExperimentBySchoolId(this.obj).then((res) => {
        this.data = res.data;
      })
    },
    /*getTableDate(){
      let userRole = JSON.parse(localStorage.getItem("user")).roleName;
      if(userRole == "student") {
        //this.isStudent = true;
        this.obj.status = "ENABLE";
      } else {
        this.obj.status = null;
      } 
  
      getAllExperiment(this.obj).then((res)=>{
        res.data.forEach(item => {
          item.requiredQuestions.forEach(element => {
                    element.title+="（必做题）"
              });
          item.optionalQuestions.forEach(element => {
                    element.title+="（选做题）"
              });
          })
        console.log(res.data); 
        this.data=res.data;
      }).catch(()=>{
        this.$message.error("无法获取实验数据");
      })
    },*/

    list(row) {
      this.listquery.problemId = row.id;
      let queryParam = this.listquery;
      this.$router.push({ name: "experimentModule/experiment/viewHistoryByProblem", params: { data: queryParam } });
    },
    
    /*//节点被点击时的回调
    handleNodeClick(data) {
      this.tableData=data;
      this.questions=data.requiredQuestions.concat(data.optionalQuestions)
    },
    handleNodeClick(index) {
      let data =this.data[index];
      this.tableData=data;
      this.questions=data.requiredQuestions.concat(data.optionalQuestions)
      this.examAndExperimentId=data.id;
      if(data.experimentProblemResults ==null) {
        data.experimentProblemResults=[];
      }
      if(data.experimentProblemResults.length !=0) {
      for(let i=0; i<data.experimentProblemResults.length;i++) {
        this.questions[i].answer =data.experimentProblemResults[i].status;
      }
      }
      //console.log(this.examAndExperimentId);
      this.listquery.testId = this.examAndExperimentId;
    },*/
    handleNodeClick(index) {
      this.loading = true;
      let data = this.data[index];
      this.listquery.testId = this.data[index].id;
      this.examAndExperimentId=this.data[index].id;
      //console.log(this.examAndExperimentId,"exam");
      let obj = {
        userId: JSON.parse(localStorage.getItem("user")).userId,
        experimentId: this.data[index].id
      }
      getExperimentByexperimentIdAndUserId(obj).then(res => {
        this.tableData = res.data;
          res.data.requiredQuestions.forEach(element => {
                    element.title+="（必做题）"
              });
              console.log(res.data.requiredQuestions)
          res.data.optionalQuestions.forEach(element => {
                    element.title+="（选做题）"
              });
        this.questions=res.data.requiredQuestions.concat(res.data.optionalQuestions);
        this.loading = false;
      })
    },

    /*answer(index) {  //答案查看
      console.log(index);
    },
    history() {  //查看历史记录
      this.$router.push({ path: "./history" });
    },*/
    enter(row) { //进入操作
      row.examAndExperimentId=-this.examAndExperimentId;
      //console.log(row.examAndExperimentId,"rowexam");
      console.log(row);
      this.$router.push({ name: "experimentModule/experimentDetail", params: { data: row } });
    },
    //点击一行进入实验详情
    rowDblclick(row, column, event) {
      this.enter(row);
    },
    edit(data) {  //编辑操作
      editExperiment(data).then(res => {
        console.log(res);
      });
    },
    handleSizeChange(size) {  //page-size发生改变时发生的函数
      this.queryParam.limit = size;
      this.getTabelData();
    },
    handleCurrentChange(page) {  //currentPage发生变化时的相应函数
      this.queryParam.current = page;
      this.getTabelData();
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  margin: 0px;
}
.select_unfold {
  text-align: left;
  width: 150px;
  background-color: rgb(236, 245, 255);
  box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgb(230, 241, 253);
}
.selectTitle::before {
  margin-right: 5px;
}
.selectTitle {
  font-size: 10px;
  color: #909399;
  font-weight: bold;
}
.head {
    pointer-events: none;
}
.history {
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 60px;
  cursor: pointer;
}
.history:hover {
  text-decoration: underline;
}
.table {
  flex: 1;
  overflow: hidden;
}
.empty {
  text-decoration: underline;
  cursor: pointer;
  color: red;
}
.enter {
  cursor: pointer;
  color:#5b8bff;
}
.enter:hover {
  color: red;
  text-decoration: underline;
}
.content {
  margin-top: 10px;
  position: relative;
}
.likelist {
  text-align: left;
  margin-top: 5px;
}
.title {
  font-size: 30px;
  color: #409eff;
  margin-bottom: 30px;
  font-weight: bold;
}
.like {
  cursor: pointer;
}
i {
  font-size: 15px;
}
.container {
  position: relative;
}
.fold_btn {
  position: absolute;
  left: 150px;
  overflow: visible;
  border: 0px;
}
.unfold_btn {
  position: absolute;
  left: 0px;
  border: 0px;
  color: #409eff;
}

.el-select {
  float: left;
}
.el-select>>>.el-input__inner {
  border-radius: 30px;
}
.block {
  margin-top:20px;
}
.btn {
  color:#409eff;
}
</style>
